<template>
  <div class="workBench">
    
    <div class="workBench_bg"></div>
    
    <div class="workBench_content">
      <div class="work_item" v-for="(item, index) in tabBarList" :key="index" @click="toRoute(item)">
        <i class="icon_work" :class="item.icon"></i>
        <span class="work_sub_title">{{item.label}}</span>
        <div class="check_box">
          <span class="number">{{workNumber[item.name] || 0}} </span>
          <van-button @click="toRoute(item)" round type="info" color="#93B7FF" size="mini" class="btn btn_check">查看</van-button>
        </div>
      </div>
      <!-- <div class="work_item" @click="toFollowList">
        <i class="icon_work"></i>
        <span class="work_sub_title">学员跟进</span>
        <div class="check_box">
          <span class="number">{{workNumber.studentFollow || 0}}</span>
          <van-button @click="toFollowList" round type="info" color="#93B7FF" size="mini" class="btn btn_check">查看</van-button>
        </div>
      </div>
      <div class="work_item" @click="toAuditionList">
        <i class="icon_work"></i>
        <span class="work_sub_title">试听课管理</span>
        <div class="check_box">
          <span class="number">{{workNumber.studentAudition || 0}}</span>
          <van-button @click="toAuditionList" round type="info" color="#93B7FF" size="mini" class="btn btn_check">查看</van-button>
        </div>
      </div> -->
      <div class="work_item" @click="toTarget">
        <i class="icon_work icon_target"></i>
        <span class="work_sub_title">目标追踪</span>
        <div class="check_box">
          <van-button round type="info" @click="toTarget" color="#93B7FF" size="mini" class="btn btn_check">查看</van-button>
        </div>
      </div>
    </div>

  </div>
</template>


<style scoped>

.workBench {
  position: relative;
}

.workBench_bg {
  height: 5.76rem;
  width: 100%;
  background:linear-gradient(236deg,rgba(255,152,83,1) 0%,rgba(255,151,151,1) 100%);
}

.workBench_content {
  position: absolute;
  left: 0;
  padding: 0 .266667rem ;
  top: .666667rem;
  width: 100%;
  box-sizing: border-box;
}

.work_item {
  height: 1.6rem;
  width: 100%;
  border-radius: .2rem;
  background: #fff;
  box-sizing: border-box;
  display: flex;
  /* justify-content: center; */
  align-items: center;
  margin-bottom: .56rem;
}

.work_item .work_sub_title {
  font-size: .373333rem;
  margin-left: .266667rem;
}

.work_item .icon_work {
  display: inline-block;
  width: .933333rem;
  height: .933333rem;
  margin-left: .666667rem;
}
  
.work_item .icon_studentAllocation {
  background: url('../../../assets/img/icon_work1.png') 0 0 no-repeat;
  background-size: contain;
}
.work_item .icon_followList {
  background: url('../../../assets/img/icon_work2.png') 0 0 no-repeat;
  background-size: contain;
}
.work_item .icon_auditionList {
  background: url('../../../assets/img/icon_work3.png') 0 0 no-repeat;
  background-size: contain;
}
/* .work_item:nth-of-type(4) .icon_work {
  background: url('../../../assets/img/icon_work4.png') 0 0 no-repeat;
  background-size: contain;
} */

.icon_target {
  background: url('../../../assets/img/icon_work4.png') 0 0 no-repeat;
  background-size: contain;
}

.work_item:nth-of-type(1) {
  border-left: .186667rem solid #8884C3;
}
.work_item:nth-of-type(1) .work_sub_title {
  color: #8884C3;
}
.work_item:nth-of-type(2) {
  border-left: .186667rem solid #FFC834;
}
.work_item:nth-of-type(2) .work_sub_title {
  color: #FFC834;
}
.work_item:nth-of-type(3) {
  border-left: .186667rem solid #FE8697;
}
.work_item:nth-of-type(3) .work_sub_title {
  color: #FE8697;
}
.work_item:nth-of-type(4) {
  border-left: .186667rem solid #8B9DFB;
}
.work_item:nth-of-type(4) .work_sub_title {
  color: #8B9DFB;
}

.check_box {
  display: flex;
  margin-left: auto;
  justify-content: center;
  align-items: center;
}
.number {
  /* width: 16px; */
  height: 16px;
  padding: 0 6px;
  /* line-height: 18px; */
  /* text-align: center; */
  border-radius: .533333rem;
  background: #E02020;
  color: #fff;
  font-size:.253333rem;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: .213333rem;
}

.btn_check {
  margin-left: auto;
  margin-right: .506667rem;
}


</style>

<script>
import {
  createNamespacedHelpers
} from "vuex";
let {
  mapState,
  mapGetters,
  mapMutations,
  mapActions
} = createNamespacedHelpers("adminBasic");


export default {
  name: 'workBench',
  data() {
    return {
      jwtAuth: {},
      schoolList: [],
      workNumber: {},
      tabBarList: [],
    }
  },
  created() {
    this.jwtAuth = JSON.parse(sessionStorage.getItem('jwtAuth'));
    this.queryAllSchool();
    this.initMenuData();
    // console.log(this.jwtAuth)
   
  },
  mounted() {
   
  },
  
  methods: {
    ...mapMutations([
      "updateInfo",
    ]),
    ...mapActions([
      "formGet",
      "post"
    ]),
    initMenuData() {
      this.formGet({
        API: 'queryMenuListMobile',
        data: {
          menuCode: 'studentManagement',
          accountId: this.jwtAuth.accountId
        }
      }).then(res => {
        console.log(res.menuList[0].children)
        res.menuList[0].children.forEach(item => {
          if(item.label == '学员') {
            item.children.forEach(childrenItem => {
              if(childrenItem.icon) {
                this.tabBarList.push(childrenItem);
              }
            })
          }
        })

        let obj = {
          label: '试听课管理',
          name: 'auditionList',
          icon: 'icon_auditionList'
        }
        this.tabBarList.push(obj)
        
      })
    },

    initData() {
      let schoolIds = [];
      this.schoolList.forEach(item => {
        schoolIds.push(item.schoolId);
      })
      this.formGet({
        API: 'queryWorkAllNumber',
        data: {
          schoolId: schoolIds.join(','),
          employeesId: this.jwtAuth.employeesId,
        }
      }).then(res => {
        this.workNumber = {
          followList: res.studentFollow,
          studentAllocation: res.studentAllocation,
          auditionList: res.studentAudition,
        };
      })
    },

    queryAllSchool(btnId) {
      let accountId
      this.jwtAuth.schoolId == '' ? accountId = '' : accountId = this.jwtAuth.accountId
      
      this.post({
        API: 'queryAllSchool',
        data: {
          accountId: accountId,
          menuId: btnId || 'studentManagement',
          schoolIds: this.jwtAuth.schoolId.split(','),
        }
      }).then(res => {
        res = res.filter(val => {
          return val.schoolId !== '';
        });
        if(btnId) {
          this.powerSchoolList = res
        }else{
          this.schoolList = res
        }
        console.log(res)
        this.initData();
      }).catch(err => {
        this.$toast.fail(err);
      })
    },

    toRoute(item) {
      switch (item.name) {
        case 'followList':
          this.toFollowList();
          break;
        case 'studentAllocation':
          this.toStudentAllocation();
          break;
        case 'auditionList':
          this.toAuditionList();
          break;
      
        default:
          break;
      }
    },
    toTarget() {
      this.$router.push({
        name: 'targetTracking'
      })
    },

    toStudentAllocation() {
      this.$router.push({
        name: 'studentAllocation'
      })
    },
    toFollowList() {
      this.$router.push({
        name: 'followList'
      })
    },
    toAuditionList() {
      this.$router.push({
        name: 'auditionList'
      })
    },

    
    
  },
  computed: {
    ...mapState([
    ]),
   
  },
  components: {
  },
}

</script>